import React ,{Component} from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import {
    DetailWrap,
    AuthorDeac,
    Article,
    IsEmpty
}from './style.js';
import { actionCreators } from './store/index';

class Detail extends Component {
 
    getDataHtml = ()=>{
        const {detail_Data} = this.props;
        let newData = detail_Data.toJS();
        let detail_html =  '';
        if(JSON.stringify(newData) !== "{}"){
                detail_html =  <DetailWrap>
                <h1 className="detail_title">{newData.detail_title}</h1>
                <AuthorDeac>
                    <div className="imgBox">
                        <img src={newData.AuthorDeac_img} alt=""/>
                    </div>
                    <div className="detail_title_info">
                        <h3>{newData.detail_title_info_name}<span className="case">+关注</span></h3>
                        <p>{newData.detail_title_info_content}</p>
                    </div>
                </AuthorDeac>
                <Article>
                    <p>{newData.Article_content_01}</p>
                    <p>{newData.Article_content_02}</p>
                    <p>{newData.Article_content_03}</p>
                    <div className="Article_imgBox">
                        <img src={newData.Article_contentImg_01} alt=""/>
                    </div>
                    <p>{newData.Article_content_04}</p>
                    <p>{newData.Article_content_05}</p>
                    <div className="Article_imgBox">
                        <img src={newData.Article_contentImg_02} alt=""/>
                    </div>
                    <p>{newData.Article_content_06}</p>
                    <p>{newData.Article_content_07}</p>
                </Article>
            </DetailWrap>
         }else{
            detail_html = <IsEmpty>没有更多内容</IsEmpty>;
         }
         return detail_html;
        }
        render () {
            return (
                    <div>
                        {
                            this.getDataHtml()  
                        }
                    </div>
                                
            )
    }
    componentDidMount(){
         let detail_id = this.props.match.params.id;
        this.props.getDetailData(detail_id);
    }
};

const mapStateToProps = (state)=>{
    return {
        detail_Data:state.getIn(['detail','detail_Data'])
    }
}
const mapDispathToProps = (dispath)=>{
    return {
        getDetailData(id){
            dispath(actionCreators.getDetailData(id))
        },
    }
}

export default connect(mapStateToProps,mapDispathToProps)(withRouter(Detail));